<template>
  <div class="container">
    <Category title="Food">
      <img slot="center" src="https://s21.ax1x.com/2024/12/25/pAjqT6P.jpg" alt="img">
      <a slot="footer" href="https://www.baidu.com">link1</a>
    </Category>
    <Category title="Games">
      <ul slot="center">
        <li v-for="(item, index) in games" :key="index">{{item}}</li>
      </ul>
      <div class="foot" slot="footer">
        <a href="https://www.baidu.com">link2</a>
        <a href="https://www.baidu.com">link3</a>
      </div>
    </Category>
    <Category title="Films">
      <video slot="center" src="https://www.w3school.com.cn/i/movie.ogg" controls>您的浏览器不支持 video 标签。</video>
      <!-- <template slot="footer">
        <div class="foot">
          <a href="https://www.baidu.com">link4</a>
          <a href="https://www.baidu.com">link4</a>
          <a href="https://www.baidu.com">link4</a>
        </div>
        <h4>欢迎来到电影频道</h4>
      </template> -->
      <template v-slot:footer>
        <div class="foot">
          <a href="https://www.baidu.com">link4</a>
          <a href="https://www.baidu.com">link4</a>
          <a href="https://www.baidu.com">link4</a>
        </div>
        <h4>欢迎来到电影频道</h4>
      </template>
    </Category>
  </div>
</template>

<script>
  import Category from './components/Category.vue'
  export default {
    name: "App",
    components: {
      Category
    },
    data(){
      return {
        foods: ['Pizza', 'Burger', 'Salad', 'Soup'],
        games: ['Chess', 'Ludo', 'Carrom', 'Poker'],
        films: ['Titanic', 'Avatar', 'Inception', 'Interstellar']
      }
    }
  }
</script>

<style lang="css" scoped>
  .container ,.foot{
    display: flex;
    justify-content: space-around;
  }
  h4{
    text-align: center;
  }
</style>